<template>
    <h2 class="title">Home页面</h2>
    <h3>{{ newcount }}</h3>
    <button @click="addBtn">新增</button>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useStore } from '../../store'
const store = useStore()
const newcount = computed(() => {
    return store.getters['getCount']
})
const count = ref(0)
const addBtn = () => {
    store.commit('addCount', ++count.value)
}



// const mode = import.meta.env
// console.log(mode)

import { type } from 'os'

interface Person {
    name: string
    age: number
}

// let userInfo: Person = {
//     name: '张三',
//     age: 18
// }

// 泛型的使用：编译期间不确定方法的类型，使用的时候指定类型
function getMsg<T>(msg: T): T {
    return msg
}
let msg = getMsg<string>('新增按钮')
console.log(msg)

// 获取对象属性的值
function getVal(o: any, key: string) {
    return o[key]
}

const userInfo = {
    name: '张三1',
    age: 100
}
// 类型变为any
const name = getVal(userInfo, 'name')
console.log(name)

// 泛型约束
// K extends keyof T : 限制K要在T的属性里面
function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key]
}
const names = getProperty(userInfo, 'name')
// const age = getProperty(userInfo, 'sex')
console.log(names)
// console.log(age)

// 泛型条件
type Fas<T> = T extends { name: infer Test } ? Test : unknown
type FasTest = Fas<{ name: string }>
// type FasTest1 = Fas<{ age: number }>

// 交叉类型：合并
interface Iname {
    name: string
}
interface Iage {
    age: number,
    sex: string
}

type user = Iname & Iage
let user1: user = {
    name: "李四",
    age: 19,
    sex: "女"
}
console.log(user1)

function add(parm1: string | number, parm2: string | number) {
    if (typeof parm1 === 'string' || typeof parm2 === 'string') {
        return `${parm1}${parm2}`
    }
    return parm1 + parm2
}
let add1 = add('Hello, ', 'TS')
let add2 = add(100, 2)
console.log(add1)
console.log(add2)


</script>

<style lang="scss" scoped>
.title {
    color: $color-primary;
}
</style>
